<template>
    <view class="h_waterfall_page" :style="'background-color:' + bgColor">
        <view v-for="(item, index) in columnData" :key="index" class="column" :style="{ width: columnWidth + 'px' }">
            <view v-for="(childItem, childIndex) in item" :key="childIndex" style="width: 100%" :id="'item' + childItem.id"
                @click.stop="click(childItem)">
                <view class="item"
                    :style="'background-color:' + cardBgColor + ';margin:' + margin + 'rpx;border-radius:' + radius + 'rpx;'">
                    <!--<image :src="childItem.picUrl" mode="widthFix" lazy-load :style="{ height: childItem.height, width: '100%' }">
                    </image>-->
                    <image :src="childItem.picUrl" mode="aspectFill" lazy-load style="width:100%;height:222rpx;">
                    </image>
                    <view class="title-info">
                        <view class="item-title">{{ childItem.title }}</view>
                        <view class="item-desc">
                            <u-icon name="eye" size="20"></u-icon>
                            <view class="item-desc-text">
                                {{ childItem.desc }}浏览
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        dataList: {
            type: Array,
            required: true,
            default: []
        },
        //显示列数
        column: {
            type: Number,
            required: true,
            default: 2
        },
        //卡片margin(rpx)
        margin: {
            type: Number,
            default: 10
        },
        //卡片圆角(rpx)
        radius: {
            type: [Number, String],
            default: 8
        },
        //页面背景颜色
        bgColor: {
            type: String,
            default: 'F6F6F6'
        },
        //卡片背景颜色
        cardBgColor: {
            type: String,
            default: '#FFFFFF'
        },
    },
    data() {
        return {
            columnData: [],
            columnWidth: 0
        };
    },
    watch: {
        dataList: {
            immediate: true,
            deep: true,
            handler() {
                this.$nextTick(() => {
                    this.setData()
                })
            }
        }
    },
    created() {
        this.setColumnWidth()
    },
    methods: {
        //计算每列的高度
        getElemHeight(index) {
            this.$nextTick(() => {
                this.dataList.map(item => {
                    uni.getImageInfo({
                        src: item.picUrl,
                        success: (e) => {
                            item.height = (e.height * (this.columnWidth / e.width)) + 'px'
                        }
                    })
                })
            })
        },
        // 设置列宽
        setColumnWidth() {
            let width = uni.getSystemInfoSync().windowWidth
            this.columnWidth = Math.floor(width / this.column)
        },
        // 设置数据
        setData() {
            const resultArray = this.dataList.reduce(
                (acc, cur, index) => {
                    const targetIndex = index % this.column;
                    acc[targetIndex].push(cur);
                    return acc;
                },
                Array.from(Array(this.column), () => []),
            );
            this.columnData = resultArray
            this.getElemHeight()
        },
        // 点击事件
        click(item) {
            this.$emit('click', item)
        }
    },
};
</script>

<style scoped lang="scss">
.h_waterfall_page {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item {
    overflow: hidden;
}

.title-info {
    padding: 0rpx 20rpx 20rpx 20rpx;
}

.item-title {
    font-size: 25rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 46rpx;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.item-desc {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 18rpx;
}

.item-desc-text {
    font-size: 24rpx;
    color: #585757;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 8rpx;
}
</style>
